<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, height=device-height, user-scalable=no, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0">
  <meta name="format-detection" content="telephone=no">
  <title>WAP 版演示</title>
  <link rel="stylesheet" href="layui/css/layui.css">
</head>
<body>

<script src="layui/layui.js"></script>
<script>
  layui.jquery.ajax({
    url: "/init/me",
    type: "GET",
  }).then(res=>{
    layui.config({
      base: '../layim/dist/layim-assets/lib/'
      ,layimAssetsPath: '../layim/dist/layim-assets/' //layim 资源文件所在目录
      ,version: true
    }).extend({
      'layer-mobile': 'layer-mobile'
      ,'zepto': 'zepto'
      ,'upload-mobile': 'upload-mobile'
      ,'layim-mobile': 'layim-mobile'
    }).use('layim-mobile', function(){
      var layim = layui['layim-mobile'] //WebIM
              ,layer = layui['layer-mobile']; //弹层

      //提示层
      layer.msg = function(content){
        return layer.open({
          content: content
          ,skin: 'msg'
          ,time: 2 //2秒后自动关闭
        });
      };

      //演示自动回复
      var autoReplay = [
        '您好，我现在有事不在，一会再和您联系。',
        '你没发错吧？face[微笑] ',
        '这是一段演示消息 face[哈哈] ',
        '演示消息 face[心] face[心] face[心] ',
        'face[威武] face[威武] face[威武] face[威武] ',
        '<（@￣︶￣@）>',
        '你要和我说话？你真的要和我说话？你确定自己想说吗？你一定非说不可吗？那你说吧，这是自动回复。',
        'face[黑线]  你慢慢说，别急……',
        '(*^__^*) face[嘻嘻]'
      ];

      layim.config({


        //上传图片接口
        uploadImage: {
          url: '/upload/image' //（返回的数据格式见下文）
          ,type: '' //默认post
        }

        //上传文件接口
        ,uploadFile: {
          url: '/upload/file' //（返回的数据格式见下文）
          ,type: '' //默认post
        }

        //,brief: true

        ,init: {
          mine:res.data.mine
          ,friend:res.data.friend
          ,group:res.data.group
        }
        //获取群员接口（返回的数据格式见下文）
        ,members: {
          url: 'init/groups' //接口地址（返回的数据格式见下文）
          ,type: 'get' //默认get，一般可不填
          ,data: {} //额外参数
        }
        //扩展聊天面板工具栏
        ,tool: [{
          alias: 'code'
          ,title: '代码'
          ,iconUnicode: '&#xe64e;'
        }]

        //扩展更多列表
        ,moreList: [{
          alias: 'find'
          ,title: '发现'
          ,iconUnicode: '&#xe628;' //图标字体的unicode，可不填
          ,iconClass: '' //图标字体的class类名
        },{
          alias: 'share'
          ,title: '个人主页'
          ,iconUnicode: '&#xe641;' //图标字体的unicode，可不填
          ,iconClass: '' //图标字体的class类名
        }]

        //,tabIndex: 1 //用户设定初始打开的Tab项下标
        //,isNewFriend: false //是否开启“新的朋友”
        ,isgroup: true //是否开启“群聊”
        //,chatTitleColor: '#c00' //顶部Bar颜色
        //,title: 'LayIM' //应用名，默认：我的IM
      });

      //创建一个会话
      /*
      layim.chat({
        id: 111111
        ,name: '许闲心'
        ,type: 'kefu' //friend、group等字符，如果是group，则创建的是群聊
        ,avatar: 'http://tp1.sinaimg.cn/1571889140/180/40030060651/1'
      });
      */


      //触发点击“新的朋友”
      layim.on('newFriend', function(){
        layim.panel({
          title: '新的朋友' //标题
          ,tpl: '<div style="padding: 10px;">自定义模版，{{d.data.test}}</div>'//模版
          ,data: { //数据
            test: '么么哒'
          }
        });
      });

      //查看聊天信息
      layim.on('detail', function(data){
        //console.log(data); //获取当前会话对象
        layim.panel({
          title: data.name + ' 聊天信息' //标题
          ,tpl: '<div style="padding: 10px;">自定义模版</div>' //模版
          ,data: { //数据
            test: '么么哒'
          }
        });
      });

      //触发点击更多列表
      layim.on('moreList', function(obj){
        switch(obj.alias){
          case 'find':
            layer.msg('自定义发现动作');

            //模拟标记“发现新动态”为已读
            layim.showNew('More', false);
            layim.showNew('find', false);
            break;
          case 'share':
            layim.panel({
              title: '个人信息' //标题
              ,tpl: '<style>\n' +
                      '    .bt1{\n' +
                      '        display: block;\n' +
                      '        text-decoration: none;\n' +
                      '        width: 100px;\n' +
                      '        height: 30px;\n' +
                      '        text-align: center;\n' +
                      '        border: 1px solid #CCC;\n' +
                      '        background: deepskyblue;\n' +
                      '        margin-top: 20px;\n' +
                      '        color: #0C0C0C;\n' +
                      '        border-radius: 10px;\n' +
                      '    }\n' +
                      '</style>\n' +
                      ' <a href="SelfInfo" class="bt1">个人信息</a>'
              ,data: { //数据
                test: '么么哒'
              }
            });
            break;
        }
      });

      //触发返回
      layim.on('back', function(){
        //如果你只是弹出一个会话界面（不显示主面板），那么可通过触发返回，跳转到上一页面，如：history.back();
      });

      //触发自定义工具栏点击，以添加代码为例
      layim.on('tool(code)', function(insert, send){
        insert('[pre class=layui-code]123[/pre]'); //将内容插入到编辑器
        send();
      });

      //触发发送消息
      layim.on('sendMessage', function(data){
        var To = data.to;
        //console.log(data);

        //演示自动回复
        setTimeout(function(){
          var obj = {};
          if(To.type === 'group'){
            obj = {
              username: '模拟群员'+(Math.random()*100|0)
              ,avatar: layui.cache.layimAssetsPath + 'images/face/'+ (Math.random()*72|0) + '.gif'
              ,id: To.id
              ,type: 'group'
              ,content: autoReplay[Math.random()*9|0]
            }
          } else {
            obj = {
              username: To.name
              ,avatar: To.avatar
              ,id: To.id
              ,type: To.type
              ,content: autoReplay[Math.random()*9|0]
            }
          }
          layim.getMessage(obj);
        }, 3000);
      });

      //模拟收到一条好友消息
      setTimeout(function(){
        layim.getMessage({
          username: "测试1"
          ,avatar: ""
          ,id: "100001"
          ,type: "friend"
          ,cid: Math.random()*100000|0 //模拟消息id，会赋值在li的data-cid上，以便完成一些消息的操作（如撤回），可不填
          ,content: "嗨，欢迎体验LayIM。演示标记："+ new Date().getTime()
        });
      }, 3000);

      //触发查看更多记录
      layim.on('chatlog', function(data, ul){
        console.log(data);
        layim.panel({
          title: '与 '+ data.name +' 的聊天记录' //标题
          ,tpl: '<div style="padding: 10px;">这里是模版，{{d.data.test}}</div>' //模版
          ,data: { //数据
            test: 'Hello'
          }
        });
      });

      //模拟"更多"有新动态
      layim.showNew('More', true);
      layim.showNew('find', true);
    });

  });
</script>
</body>
</html>
